<template>
  <data-card title="行政地区">
    <template #left>
      <el-breadcrumb v-if="logs.length>0" separator="/" :style="{fontSize: `16px`}">
        <el-breadcrumb-item v-for="(item,index) in logs" :key="index">
          {{ item.name }}
        </el-breadcrumb-item>
      </el-breadcrumb>
      <template v-else>
        行政地区
      </template>
    </template>
    <template #right>
      <el-space>
        <el-input :disabled="loading" maxlength="20" placeholder="地区名称" v-model.trim="where.name">
          <template #append>
            <el-button type="success" @click="getRegionData">搜索</el-button>
          </template>
        </el-input>
      </el-space>
    </template>
    <app-table height="calc(var(--ach) - 90px)" class="app-margin-top-interval" :data="list" :columns :loading>
      <template #coordinate="{ row }">
        <span class="app-tap" v-copy>
          {{ row.point.lng }} - {{ row.point.lat }}
        </span>
      </template>
      <template #is_hot="{ row }">
        <app-switch inactive-text="关闭" active-text="开启" :model-value="row.is_hot" @change="changeIsHot($event,row.id)"></app-switch>
      </template>
      <template #action="{ row }">
        <el-space>
          <el-button v-if="row.level>1" size="small" type="success" @click="viewSubordinates(row,'0')">
            上级
          </el-button>
          <el-button v-if="row.level<3" size="small" type="primary" @click="viewSubordinates(row,'1')">
            下级
          </el-button>
        </el-space>
      </template>
    </app-table>
  </data-card>
</template>
<script setup lang="ts">
import {changeHotApi, getRegionDataApi} from "@/apps/admin/api/system/region";
import {TableColumn} from "@/components/AppTable/TableType";
import {ref} from "vue";

const where = ref({
  pid: 0,
  name: ''
})

const list = ref([])
const loading = ref(false)
const logs = ref([])

/**
 * 获取行政地区数据
 */
async function getRegionData() {
  loading.value = true
  const result = await getRegionDataApi({...where.value})
  if (result.code === 200) {
    list.value = result.data
  }
  loading.value = false
}

/**
 * 修改设置热门地区
 */
async function changeIsHot(value: 0 | 1, id: number) {
  const result = await changeHotApi(value, id)
  if (result.code === 200) {
    await this.getRegionData()
  }
}


/**
 * 查看下级
 */
function viewSubordinates(row: any, type: '0' | '1') {
  if (type === '0') {//上级
    if (logs.value.length > 0) {
      logs.value.pop()
    }
    if (logs.value.length > 0) {
      where.value.pid = logs.value[logs.value.length - 1].id
    } else {
      where.value.pid = 0
    }
  } else {//下级
    where.value.pid = row.id
    logs.value.push({id: row.id, name: row.shortname})
  }
  where.value.name = ''
  getRegionData()
}


const columns: Array<TableColumn> = [
  {prop: "id", label: "id", width: 90},
  {prop: "is_hot", label: "热门", minWidth: 100},
  {prop: "shortname", label: "简称", minWidth: 150},
  {prop: "name", label: "名称", minWidth: 150},
  {prop: "level", label: "级别", minWidth: 80},
  {prop: "pinyin", label: "拼音", minWidth: 90},
  {prop: "code", label: "区号", minWidth: 100},
  {prop: "zip", label: "邮编", minWidth: 100},
  {prop: "first", label: "首字母", minWidth: 70},
  {prop: "coordinate", label: "位置", minWidth: 150},
  {type: "action", label: "操作", width: 130, fixed: "right", align: "center"}
]

getRegionData()
</script>